<template>
	<view class="edit_personage_information">
		<app-title title='个人资料'></app-title>
		<view style="line-height: 160upx;position: relative;background-color: #fff;" @click="chooseImage">
			<text style="padding-left: 20upx;font-size: 30upx;color: #666;margin: 0 30rpx;">修改头像</text>
			<view style="position: absolute;top: 20upx;right: 20upx;border-radius: 60upx;" v-if="avatar">
				<image :src="avatar === ''?'@/static/face.png': avatar" style="width: 120upx;height: 120upx;">
				</image>
			</view>
		</view>
		<view class="" style="display: flex;background-color: #fff;padding: 20rpx 0;">
			<view style="padding-left: 20upx;font-size: 30upx;color: #666;margin: 0 30rpx;">修改昵称</view>
			<input type="text" :value="nickname" @blur="nicknameIpt" class="flex" />
		</view>
		<view style="padding: 60rpx;">
			<button type="primary"
				style="background: #FE751A;width:100%;border-radius: 100rpx;height:80rpx;line-height: 80rpx;"
				@click="submit">确认修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				avatar: '',
				openid: '',
				imagess: [],
				imgurl: '',
				equipment: ''
			};
		},
		onLoad: function() {
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				}
			});
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
		},
		methods: {
			chooseImage() {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						let file = res.tempFilePaths
						var images = []
						var img = ''
						console.log(file)
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: _this.$BASE_URL +
									'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									images.push(JSON.parse(res.data).url);
									_this.imagess = images;
									_this.avatar = _this.imagess;
									img = img + JSON.parse(res.data).url + ';';
									_this.imgurl = img;
								}
							});
						}
					}
				});
			},
			setAjax() {
				console.log(this.openid)
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info.face&openid=' +
						this.openid + '&app=1',
					success: res => {
						uni.hideLoading();
						this.nickname = res.data.member.nickname;
						this.avatar = res.data.member.avatar;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			nicknameIpt(e) {
				this.nickname = e.detail.value
			},
			submit() {
				uni.showLoading()
				var data = {
					'openid': this.openid,
					'nickname': this.nickname,
					'avatar': this.avatar,
				};
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info.face&app=1',
					method: 'POST',
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading();
						if (res.data.status == 1) {
							uni.showToast({
								title: '修改成功'
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/member/member'
								})
							}, 500)
						} else {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
						}
					},
					fail: () => {
						uni.hideLoading();
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.edit_personage_information {
		height: 100vh;
		background-color: #F6F6F6;
	}

	page {
		height: 100%;
		background-color: #f2f5fa;
	}

	.list {
		padding: 16upx 24upx;
	}

	.list .title_ {
		width: 130upx;
		line-height: 50upx;
		color: #666;
	}

	.list .flex {
		line-height: 50upx;
		color: #666;
		padding-left: 24upx;
	}

	.list .right {
		color: #999;
	}
</style>